﻿<link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/easyui/demo.css">
<link rel="stylesheet" type="text/css" href="/easyui/base.css">

<link rel="stylesheet" type="text/css" href="/lib/Hui-iconfont/1.0.8/iconfont.css" />

<script type="text/javascript" src="/easyui/jquery.min.js"></script>
<script type="text/javascript" src="/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/lib/layer/2.4/layer.js"></script>

<body class="easyui-layout">

<!-- 遮罩层 -->
<div id='PageLoadingTip' style="position: absolute; z-index: 1000; top: 0px; left: 0px; width: 100%; height: 100%; background: #c7edcc; text-align: center;">
    <h1 style="top: 48%; position: relative;color:#15428B;">页面加载中···</h1>
</div>
<table id="tg" class="easyui-treegrid" title="" style="width:100%;height:100%;padding-bottom: 2px;"
       data-options="
				animate: true,
				lines:true,
				fitColumns: true,
				url: '/menu-tree-list',
				method: 'get',
				idField: 'id',
				treeField: 'menuName',
				onContextMenu: onContextMenu
			">
    <thead>
    <tr>
        <th data-options="field:'menuName',width:60,align:'left'">角色名称</th>
        <th data-options="field:'remark',formatter:remarkformat,width:60,align:'center'">说明</th>
    </tr>
    </thead>
</table>

<!-- 新建权限 -->
<div id="root" class="easyui-menu" style="width:120px;">
    <div onclick="append()" data-options="iconCls:'icon-add'" >新建权限</div>
    <div onclick="collapse()">闭合</div>
    <div onclick="expand()">展开</div>
</div>
<!-- 分配权限 -->
<div id="authority-right" class="easyui-menu" style="width:120px;">
    <div onclick="authAssign()" data-options="iconCls:'icon-add'" >分配权限</div>
    <div onclick="collapse()">闭合</div>
    <div onclick="expand()">展开</div>
</div>

<!-- 分配按钮 -->
<div id="menu-right" class="easyui-menu" style="width:120px;">
    <div onclick="butonAssign()" data-options="iconCls:'icon-add'">分配按钮</div>
    <div onclick="collapse()">闭合</div>
    <div onclick="expand()">展开</div>
</div>

<script type="text/javascript">

    var id = '';
    var btnRighs = '';
    var menuRights = '';
    var roleId = '';
    function onContextMenu(e,row){
        e.preventDefault();
        id = row.id;
        menuRights = row.Rrights;
        btnRighs = row.Brights;
        roleId = row.roleId;
        $(this).treegrid('select', row.id);
        if(row.remark=='authority'){
            $('#authority-right').menu('show',{
                left: e.pageX,
                top: e.pageY
            });
        }else if(row.remark=='menu'){
            $('#menu-right').menu('show',{
                left: e.pageX,
                top: e.pageY
            });
        }else if(row.remark=='root'){
            $('#root').menu('show',{
                left: e.pageX,
                top: e.pageY
            });
        }

    }
    var idIndex = 100;

    //新建权限
    function append(){
        idIndex++;
        var node = $('#tg').treegrid('getSelected');
        $('#tg').treegrid('append',{
            parent: node.id,
            data: [{
                id: idIndex,
                roleName: 'New Task'+idIndex,
                remark : 'authority'
            }]
        })
    }
    function removeIt(){
        var node = $('#tg').treegrid('getSelected');
        if (node){
            $('#tg').treegrid('remove', node.id);
        }
    }
    //闭合
    function collapse(){
        var node = $('#tg').treegrid('getSelected');
        if (node){
            $('#tg').treegrid('collapse', node.id);
        }
    }
    //展开
    function expand(){
        var node = $('#tg').treegrid('getSelected');
        if (node){
            $('#tg').treegrid('expand', node.id);
        }
    }

    //分配权限
    function authAssign() {
        layer.open({
            type: 2,
            title: false,
            closeBtn: 0,
            shadeClose: true,
            area: ['757px', '300px'],
            skin: 'demo-class',
            content: '/admin-role-assign/'+menuRights+'/'+id
        });
    }

    //分配按钮
    function butonAssign() {
        layer.open({
            type: 2,
            title: false,
            closeBtn: 0,
            shadeClose: true,
            area: ['757px', '300px'],
            skin: 'demo-class',
            content: '/admin-button-assign/'+menuRights+'/'+btnRighs+'/'+roleId
        });
    }


</script>

<!-- format -->
<script type="text/javascript">
    function remarkformat(value){
        if(value=='button'){
            return '二级菜单按钮';
        }
        if(value=='parent-menu'){
            return '一级菜单';
        }
        if(value=='son-menu'){
            return '二级菜单'
        }
        if(value=='root'){
            return '系统根菜单';
        }
    }
</script>


<!-- 遮罩层 -->
<script type="text/javascript">
    function _PageLoadingTip_Closes() {
        $("#PageLoadingTip").fadeOut("normal", function () {
            $(this).remove();
        });
    }

    var _pageloding_pc;
    $.parser.onComplete = function () {
        if (_pageloding_pc) clearTimeout(_pageloding_pc);
        _pageloding_pc = setTimeout(_PageLoadingTip_Closes, 1000);
    }
</script>